<template>
    <a-card :bordered="false">
        <div style="margin-bottom: 15px;">
            <a-button type="primary" @click="add">新增分类</a-button>
        </div>
        <a-table bordered :columns="columns" :data-source="datasources" :rowKey="r => r.id" @expand="onExpand">
            <template slot="action">
                <a style="margin-right: 8px">
                    <a-icon type="plus"/>新增
                </a>
                <a style="margin-right: 8px">
                    <a-icon type="edit"/>编辑
                </a>
            </template>
        </a-table>
    </a-card>
</template>

<script>
    const columns = [
        { title: '分类名', dataIndex: 'name'},
        { title: '排序', dataIndex: 'sort'},
        { title: '操作', dataIndex: 'action',     scopedSlots: { customRender: 'action' }},
    ]
    export default {
        name: "category",
        data(){
            return {
                columns,
                datasources: []
            }
        },
        methods:{
            add(){
                this.$router.push({name:"新增分类"})
            },
            async onExpand(expanded, record){
                if(record.noChildren || record.children.length){
                    return
                }
                var r = await this.$get("/api/admin/category/getChildrenByPid", {id: record.id})
                console.log(r)
                if(!r.length){
                    record.noChildren = true
                    // this.$delete(record, "children")
                    return
                }
                r.forEach(e => {
                    e.children = []
                })
                record.children = (r)
                console.log(r)
                console.log(expanded, record)
            }
        },
        async mounted() {
            var r = await this.$get("/api/admin/category/getChildrenByPid")
            r.forEach(r => {
                r.children = []
            })
            this.datasources = r
        }
    }
</script>

<style scoped>

</style>